<template>
	<view class="">
		<view class="tit">
			<view class="tit-top">请使用相册上传身份证照片</view>
			<view class="tit-bot">张**请上传身份证正反面</view>
		</view>
		<view class="cainim dis">
			<view class="cainim-left cainim-right-com" @click="openAuth('READ_EXTERNAL_STORAGE',1)">
				<image v-if="form.zm" :src="form.zm" mode=""></image>
				<text v-else>身份证正面</text>

			</view>
			<view class="cainim-right cainim-right-com" @click="openAuth('READ_EXTERNAL_STORAGE',2)">
				<image v-if="form.bm" :src="form.bm" mode=""></image>
				<text v-else>身份证背面</text>
			</view>
		</view>

		<view class="msg-wrap">
			<view class="msg dis">
				<view class="msg-left cainim-right-com">姓名</view>
				<view class="msg-right cainim-right-com">
					<input type="text" v-model="form.name" maxlength="4" placeholder="请输入姓名" />
				</view>
			</view>
			<view class="msg dis">
				<view class="msg-left cainim-right-com">身份证</view>
				<view class="msg-right cainim-right-com">
					<input type="idcard" v-model="form.idCard" placeholder="请输入身份证" />
				</view>
			</view>
		</view>
		<view class="btn" @click="submit">
			下一步
		</view>
		<authpups ref="authpup" type="top" @changeAuth="changeAuth" :isNativeHead='true' :permissionID="permissionID">
		</authpups>
	</view>
</template>

<script setup>
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	import {
		upload
	} from '@/api/index.js'
	import {
		ref,
		onMounted,
		getCurrentInstance
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance();
	let imgTpe = ref(null);
	let form = ref({
		zm: '',
		bm: '',
		name: '',
		idCard: ''
	})
	// 权限弹框开始
	const permissionID = ref('');
	const authpup = ref(null);
	const openAuth = (permission, type) => {
		imgTpe.value = type
		// 平台编译，如果是浏览器H5端，那直接跳转实名认证页面
		//#ifdef H5
		uplowndImg()
		//#endif
		permissionID.value =
			permission // 这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
		setTimeout(() => {
			authpup.value?.open()
		}, 500)
	}
	// 有权限之后的回调
	const changeAuth = () => {
		// 这里是权限通过后执行自己的代码逻辑
		console.log('权限已授权，此时可以调用uni的chooseImage等api了')
		uplowndImg()
	}
	let submit = () => {
		// uni.navigateTo({
		// 	url: '/pagesC/trueName/cor'
		// })
		// return;
		if (form.value.zm == '') {
			proxy.$ts("请上传身份证正面图片")
			return;
		} else if (form.value.bm == '') {
			proxy.$ts("请上传身份证背面图片")
			return;
		} else if (form.value.name == '') {
			proxy.$ts("请输入姓名")
			return;
		} else if (form.value.idCard == '') {
			proxy.$ts("请输入身份证")
			return;
		} else if (!validateIdCard(form.value.idCard)) {
			proxy.$ts("请输入正确的身份证")
			return;
		}
		const params = encodeURIComponent(JSON.stringify(form.value));

		// 跳转页面并传递对象参数
		uni.navigateTo({
			url: `/pagesC/trueName/cor?params=${params}`
		});
		console.log(form.value, 'form')
	};
	let validateIdCard = (idCard) => {
		// 使用RegExp对象进行验证
		var regExp = new RegExp(/^(^\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/);
		return regExp.test(idCard);
	}
	let uplowndImg = () => {

		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album', 'camera'], //从相册选择
			success: function(res) {
				if (res) {
					imgToBase64(res.tempFilePaths[0]).then(base64 => {
						// console.log("[转换成base64]", base64)
						upUrl(base64)
					})
				}


			}
		});
	}
	let imgToBase64 = (data) => {
		return new Promise((resolve, reject) => {
			pathToBase64(data).then(base64 => {
				resolve(base64)
			}).catch(error => {
				console.error(error)
				reject(error)
			})
		})
	};
	let upUrl = async (base64) => {
		uni.showLoading({
			title: '正在上传图片请稍后...'
		})
		let hhh = {
			img: base64
		}
		// console.log(formData,'formData')
		const ress = await upload(hhh);
		if (imgTpe.value == 1) {
			form.value.zm = ress.data
		} else if (imgTpe.value == 2) {
			form.value.bm = ress.data
		}
		uni.hideLoading()
		console.log(ress.data, 'kkkk')
	}
</script>

<style lang="scss" scoped>
	.btn {
		width: 80%;
		margin: 0 auto;
		margin-top: 160rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		font-size: 36rpx;
		background: $mian-color;
		border-radius: 100rpx;
	}

	.msg-wrap {
		margin-top: 40rpx;
	}

	.msg {
		width: 90%;
		align-items: center;
		border-bottom: 1px solid rgba(0, 0, 0, 0.09);
		margin: 0px auto;
		line-height: 120rpx;

		.msg-right {
			width: 70%;

			input {
				font-size: 28rpx;
				color: #666666;
			}
		}

		.msg-left {
			width: 30%;
			font-size: 32rpx;
			color: #1B1B1E;
			font-family: 500;
		}
	}

	.cainim {
		justify-content: space-around;

		.cainim-right-com {
			width: 40%;
			height: 170rpx;
			background-color: #F2F7FF;
			border-radius: 6rpx;
			line-height: 170rpx;
			text-align: center;
			color: #737373;
			font-size: 24rpx;

			image {
				width: 100%;
				border-radius: 6rpx;
				height: 100%;
			}
		}

		.cainim-right {}

		.cainim-left {}
	}

	.tit {
		text-align: center;
		padding: 60rpx 0;

		.tit-bot {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #737373;
			margin-top: 37rpx;
		}

		.tit-top {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #1B1B1E;
		}
	}
</style>